WebAudio全盛のこの時代に役に立つかはわかりませんが素直に実装すると結構ハマるポイントが多いのでメモがてら残しておきます。
概要Audio要素とはHTML5から追加された要素でこの要素を使うことで音の再生や一時停止などをハンドリングできるので音楽再生プレイヤーのような機能をJSだけで実現することができる。
主に持っている機能再生/一時停止再生位置変更（シーク）音量変更特徴良い部分HTML5の初期段階からありスマホでは古い端末(iOS5、Android2.3以上ぐらい)でも再生することができる※利用できるブラウザの範囲は狭いが後発のWeb Audioのほうができることは多いストリーミングサーバーを設けずRangeリクエストで擬似的にストリーミングを実現させることができる悪い部分autoplay という属性がありこれをtrueにするとユーザーのアクションを待たずに再生できるのだがこちらはスマホでは無効化される（自動再生開始によるユーザーの意図しないトラフィック発生を防ぐためらしい）スマホではユーザーアクションを伴わないと読み込みや再生動作を開始できない場合が多いので、その想定で作ると良いブラウザによって挙動や各種イベントの発生のタイミングが異なる。controlers と指定するとブラウザ側で再生や停止のコントロールUIを出してくれるがブラウザによって表示やサイズの統一感がない。音量調整の属性があるが、すべてのOSで使えるわけではなく、iOSでは非対応。Audioタグの再生フロー例コードをベースに再生の一例を記載します。
// オブジェクトを生成しますvar url = "http://example.com/hogehoge.mp3";var audio = new Audio(url);// 実体ファイルをロードします。audio.load();// readyStateからロード状態を判断します。if (audio.readyState === 4) { audio.play();} else { // 再生可能状態でなければ再生可能状態になった時のイベント通知をセットします audio.addEventListener('canplaythrough', function (e) {audio.removeEventListener('canplaythrough', arguments.callee);audio.play(); });}1.オブジェクトの生成再生ファイルを生成します。情報取得元のソースは生成時でなくてもセットすることが出来ます。
2.実体ファイルをロード実体ファイルをロードします。ただし、スマートフォンの場合は play() までロードしない端末もあり確実にここで始まるというわけではないので気をつけてください。
3.readyStateからロード状態を判断audioタグはreadyStateで再生可能な状態かを判断できます。
readyStateの値状態名説明0HAVE_NOTHINGダウンロードしていない1HAVE_METADATAメディアメタデータのダウンロード済み2HAVE_CURRENT_DATA現在再生位置の直近までのデータダウンロード済み3HAVE_FUTURE_DATA再生位置に加え次フレームデータまでをダウンロード済み4HAVE_ENOUGH_DATA再生位置に加え次フレームデータまでをダウンロード済みであり、且つダウンロード速度から計算し、最後まで再生できるだけのデータをダウンロード済である状態だいたいは 4 でなければ再生出来ないことが多いので4であるかしかチェックしないことが多いです。
4.再生可能状態でなければ再生可能状態になった時のイベント通知をセット上記のロード状況において再生出来ない場合はまだダウンロードが十分に終わっていない可能性があるのでaddEventListener イベントをセットしてロード状況を確認します。
この場合は canplaythrough のイベントを見ます。なお、主なイベントの名称と内容に関しては以下のとおりです。
イベント名称説明canplaythroughバッファリングのために止まること無く再生できる時に発火します。canplay再生可能なところまでデータをDLして再生可能になった時に発火します。timeupdate秒数が変化している際に、変わる度に発火されます。発火したタイミングで currenttime を取得すると現在の再生秒数が取れますが、これを利用してでUIを変更するのはオススメしません。ended再生が最後まで完了した時に発火します。error何かエラーが起きた時に発火します。ただし発火タイミングはブラウザによって様々なので一律同じところでエラーが呼ばれるとは限りません。play再生が開始するタイミングで発火します。一時停止からの復帰でも発火します。※canplaythroughに関して表記が正確ではなかったので修正しました（コメント欄参照）他にもイベントがありますが他のモノに関してはこちらを参考にして下さい。またイベントの発火順番はブラウザや環境によって大きく異なりますので気をつけてください。利用する主要な環境で検証して最適なタイミングで噛みあうように調整するようにしてください。
参考ページ第1章 Audio/Video | SoftBank スマートフォン サービス開発支援サイトiOS における HTML5 の audio 要素に関する制約を克服するHTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)- - Yahoo! JAPAN Tech BlogHTML Audio/Video DOM ReferenceTakazudolog - 地獄のvideo／audio要素モバイルブラウザオーディオ調査・伝説の最期編 | クラウド番外地最近増えてきた、音声を扱うアプリとHTMLでの実装についてPackaging HTML and Apps which deal with audio | Designers Hack（デザイナーズハック）